<template>
	<view class="" >
		<view class="contract">
			<!-- 标题 -->
			<view class="contract-title">
				<view class="contract-flex" :class="cindex==index?'contract-show':''" v-for="(item,index) in ctitle" :key="index"
				 @tap="getGoods(item,index)">
					{{item.title}}
				</view>
				<image v-if="cindex==1" src="../../../static/search.png" class="search" mode="aspectFill" @tap="search"/>
			</view>
			<!-- 全部 现货 合约 -->
			<view class="swiperes" v-if="cindex=='0'">
				<view v-for="(item,index) in swiper" :class="sindex==index?'swiperes-show':''" :key="index" class="swiperes-itemes" @tap="getswiper(item,index)">
					{{item}}
				</view>
			</view>
		</view>
		<!-- swiper -->
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" style="height: 1120rpx;" v-if="cindex=='0'">
			<!-- 全部 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower(1)">
					<!-- srategying 加载显示 -->
					<documentaryitem :srategying.sync="loading.srategying"/>
				</scroll-view>
			</swiper-item>
			<!-- 现货 -->
			<swiper-item  class="swiper-item">
				<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower(2)">
				<documentaryitem/>
				</scroll-view>
			</swiper-item>
			<!-- 合约 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower(3)">
				   <documentaryitem />
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 发送人 -->
		<scroll-view scroll-y="true" class="scroll-pelpe" @scrolltolower="scrolltolower(4)" v-else>
		<view class="polpe"  >
			<documentarypolpe class="" :list.aync="list" :srategying.sync="loading.srategying"/>
			<view class="btn" @tap="search(1)">
				我是跟单发起人
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	import documentaryitem from './documentaryitem.vue'
	import documentarypolpe from './documentarypolpe.vue'
	export default {
		name: "contract",
		components:{
			documentaryitem,
			documentarypolpe
		},
		data() {
			return {
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				swiper:['全部','现货','合约'],//
				sindex:0,
				ctitle: [ //bar
					{
						title: '策略'
					},
					{
						title: '发送人'
					}
				],
				cindex: 0, //标题选中下标
				Strategy:[{
						name: '网格交易',
						num: 'Huobi',
						center: '网格交易的和约版本，放大本金，加上杠杆,分仓套利'
					},
					{
						name: '马丁追踪',
						num: 'Huobi',
						center: '马丁追踪与趋势追踪结合的交易模型，加上杠杆，倍投利器，马丁追踪与趋势追踪结合的交易模型'
					}],
				// 发起人内容
				list: [{
						name: '网格交易',
						num: 'V2JHYJ',
						center: 'Huobi'
					},
					{
						name: '马丁追踪',
						num: 'V2JHYJ',
						center: 'Binance'
					}
				],
				loading:{
					srategying:'loadmore'
				},//下拉加载
			};
		},
		mounted() {
			// this.loading.srategying='loading' //刷新中
			// this.loading.srategying='loadmore'//加载更多数据
			// this.loading.srategying='nomore'//没有更多数据
		},
		methods: {
			search(e){//跳转搜索or 追踪人
			    if(e=='1'){
					this.$Router.push({ path: '/pages/transaction/people'})
				}else{
				    this.$Router.push({ path: '/pages/transaction/search'})	
				}
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.sindex = current;
				
			},
			getGoods(item, index) {//标题切换
				this.cindex = index
			},
			getswiper(item, index){//swipeer切换
				this.sindex = index//标题切换
				this.swiperCurrent=index//底部内容切换
			},
			scrolltolower(e){
				console.log("下拉",e)
			},
		}
	}
</script>

<style lang="scss">
	$radio:12rpx;
	$color-opact: $color-fu;

	.contract {
		padding: 50rpx 20rpx 10rpx;
		
	}
	.search{
		position: absolute;
		right: 35rpx;
		width: 35rpx;
		height: 35rpx;
		// transform: scaleY(60deg);
		transform: rotateY(180deg);
	}
	.contract-title {
		@include flex;
		justify-content: center;
		border-radius: 12rpx;

		.contract-flex {
			background: $color-bg;
			line-height: 65rpx;
			padding: 0rpx 40rpx;
		}

		.contract-flex:nth-child(1) {
			border-bottom-left-radius: $radio;
			border-top-left-radius: $radio;
		}

		.contract-flex:nth-child(2) {
			border-bottom-right-radius: $radio;
			border-top-right-radius: $radio;
		}

		.contract-show {
			color: #FFFFFF;
			background: $light-color !important;
		}
	}

	.contract-center {
		background-image: url(../../../static/goods2.png);
		@include background;
		margin: 30rpx 30rpx 30rpx 27rpx;
		
		.center-flex{
			@include flex;
			padding: 35rpx 40rpx 20rpx;
		}
		.center-flex1{
			@include flex;
			justify-content: space-between;
			background-color: $color-bg;
			border-bottom-left-radius: 18rpx;
			border-bottom-right-radius: 18rpx;
			padding: 10rpx 40rpx ;
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.45);
			.flex1{
				@include flex;
				image{
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
			}
		}
		.center:nth-child(1) {
			width: 70%;
		}
		.center:nth-child(2) {
			width: 30%;
		}
		.center {
			.center2-item1 {
				font-size: 30rpx;
				line-height: 60rpx;

				text {
					padding: 6rpx 10rpx;
					border-radius: 18rpx;
					color: $color-opact;
					font-size: 24rpx;
					margin-left: 20rpx;
					border: 1rpx solid $border;
				}
			}

			.center2-item2 {
				color: $color-opact;
				font-size: 24rpx;
				// line-height: 60rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
    .swiperes{
		padding: 40rpx 10rpx 0rpx;
		@include flex;
		.swiperes-itemes{
			padding-right: 30rpx;
			color: $color-opact;
			font-size: 26rpx;
		}
		.swiperes-show{
			color: $light-color;
			font-size: 30rpx;
			font-weight: bold;
			// transition: 1s;
		}
	}
	.swiper-item{
		// padding: 0rpx 30rpx;
		// width: 9% !important;
		min-height: 500rpx;
		// border: 1px solid red;
		.scroll-y{
			height: 1115rpx;
			// border: 1px solid red;
		}
	}
	.scroll-pelpe{
		height: 78vh;
		// border: 1px solid red;
	}
	.polpe{
		padding: 30rpx;
		width: 100%;
		// border: 1px solid red;
		.btn{
			background: $light-color;
			border-radius: 44rpx;
			color: #FFFFFF;
			padding: 23rpx 45rpx;
			font-size: 28rpx;
			position: fixed;
			bottom:60rpx;
			width: 92%;
			@include flex;
			&::after{
				content: '';
				position: relative;
				background-image: url(../../../static/icon-back-white.png);
				@include background;
				width: 20rpx;
				height: 28rpx;
				right: -63%;
				transform: rotate(-180deg);
			}
		}
	}
</style>
